@import "/web/css/common/main-mobile";

body{display: none;}

@color-blue : #99d7ff;

.icon-music{position: fixed;width: 36/@rem;height: 36/@rem;top: 26/@rem;right: 26/@rem;background: url("../../img/icon-music.png") center / contain;z-index: 12;}
.icon-music.no{background-image: url("../../img/icon-music-active.png");}

.head-icon{
    position: fixed;top: 0;width: 100%;height: 152/@rem;background: url("img/head-icon.png") 30/@rem top no-repeat;z-index: 11;background-size: auto 100%;
}

.main-swiper{
    width: 100%;height: 100%;
    .swiper-slide{
        position: relative;font-size: 26/@rem;color: #fff;background: url("img/bg.jpg") left center / cover no-repeat;
        & > *{position: absolute;}
        .title{width: 500/@rem;top: 190/@rem;left: 125/@rem;font-size: 50/@rem;text-align: center;letter-spacing: 4/@rem;}
        .top-logo{width: 128/@rem;left: 30/@rem;top: 6/@rem;}
        .top-tit{width: 225/@rem;right: 90/@rem;top: 50/@rem;}
        .car-logo{bottom: 0;width: 400/@rem;left: 175/@rem;}
        .arrow-down{width: 150/@rem;left: 50%;margin-left: -75/@rem;bottom: 20/@rem;z-index: 1;}

        .main-box{
            width: 400/@rem;height: 400/@rem;left: 50%;margin-left: -200/@rem;top: 415/@rem;
            .tit1{position: absolute;top: -130/@rem;left: 24/@rem;font-size: 16/@rem;line-height: 26/@rem;}
            .tit2{position: absolute;top: -100/@rem;left: 24/@rem;font-size: 50/@rem;
                b{font-size: 80/@rem;}
            }
            .pic{position: absolute;top: 0;left: 0;width: 100%;
                img{display: block;width: 100%;position: relative;z-index: 2;}
                i{position: absolute;width: 50/@rem;height: 50/@rem;background: url("img/light.png") center / 100% no-repeat;z-index: 3;}
            }
        }

        .btn{
            top: 850/@rem;left: 0;width: 100%;text-align: center;
            a{display: inline-block;min-width: 200/@rem;line-height: 60/@rem;height: 60/@rem;color: #fff;font-size: 24/@rem;border: 1px solid #fff;padding: 0 20/@rem;}
        }

        /*.btn{
            width: 306/@rem;height: 178/@rem;bottom: 60px;left: 184/@rem;color: @color-blue;font-size: 26/@rem;box-sizing: border-box;text-align: center;padding: 70/@rem 47/@rem 0 20/@rem;
            background: url("img/btn-bg.png") center top / contain;
        }*/

        .my-canvas{top: 0;z-index: -1;}
        #c{width: 100%;;top: 120/@rem;z-index: -1;}
    }

    .slide0{
        .main-box{
            text-align: center;
            .tit4{font-size: 35/@rem;font-weight: bold;}
            .tit5{margin-top: 20/@rem;font-size: 30/@rem;}
        }
    }

    .slide1{
        .main-box{
            .pic1{left: -5/@rem;}
        }
    }

    .slide2{
        .main-box{
            .pic1{left: 5/@rem;top: 5/@rem;}
        }
    }

    .slide3{
        .main-box{
            .pic1{left: 30/@rem;top: 10/@rem;width: 88%;}
        }
    }

    .slide4{
        .tit{top: 320/@rem;left: 0;width: 100%;font-size: 40/@rem;text-align: center;
            b{font-size: 45/@rem;}
        }
        .car{
            top: 520/@rem;width: 510/@rem;left: 65/@rem;
        }
    }

    .slide5{
        .txts{
            top: 120/@rem;left: 0;width: 100%;height: 397/@rem;text-align: center;color: #fff;padding-top: 78/@rem;font-weight: bold;
            background: url("img/p5-txt-bg.png") center top no-repeat;background-size: 479/@rem;
            .txt1{font-size: 35/@rem;}
            .txt2{font-size: 28/@rem;margin-top: 10/@rem;}
            .txt3{margin-top: 40/@rem;font-size: 48/@rem;}
        }
        .car{top: 500/@rem;width: 300/@rem;left: 170/@rem;}
        //.btn{font-size: 18/@rem;}
        //.btn{font-size: 20/@rem;padding-top: 75/@rem;}
    }

    .slide6{
        .tit{top: 260/@rem;width: 100%;text-align: center;font-size: 48/@rem;line-height: 85/@rem;}
        .car{top: 500/@rem;width: 383/@rem;left: 127/@rem;}
    }

    .slide7{
        .tit{top: 200/@rem;width: 100%;text-align: center;font-size: 30/@rem;line-height: 50/@rem;}
        .form{
            top: 380/@rem;width: 473/@rem;height: 384/@rem;left: 80/@rem;background: url("img/p7-form-bg.png") center / contain;
            .group{
                height: 60/@rem;padding: 0 60/@rem 0 110/@rem;box-sizing: border-box;
                &:first-child{margin-top: 15/@rem;}
                &:nth-child(2){margin-top: 80/@rem;}
                &:nth-child(3){margin-top: 75/@rem;}
                input{display: block;height: 30/@rem;line-height: 30/@rem;padding: 15/@rem 0;border: 0;background: none;font-size: 28/@rem;color: #fff;
                    &::placeholder{line-height: 36/@rem;}
                }
            }
        }
    }

    .slide8{
        .tit{top: 200/@rem;width: 100%;text-align: center;font-size: 30/@rem;line-height: 50/@rem;}
        .qrcode{top: 480/@rem;width: 319/@rem;left: 160/@rem;text-align: center;}
        //.btn{font-size: 16/@rem;padding-top: 78/@rem;}
    }
}

.share-box{
    position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.8);z-index: 12;display: none;
    text-align: right;padding: 90/@rem 90/@rem 0 0;
    img{width: 259/@rem;}
}

//iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) {
    .main-swiper{
        .swiper-slide{
            .btn{top: 1000/@rem;}
        }
        .slide5{
            .txts{
                top: 150/@rem;
            }
            .car{top: 600/@rem;}
        }
    }
}

//动画命名
.ani-music{animation: ani-music 2s linear infinite;}
.ani-down{animation: ani-down 1.5s infinite;}
.ani-print{animation: ani-print 2s infinite;}
.ani-into{animation: ani-into 1.5s infinite;}
.ani-pulse{animation: ani-pulse 1.5s infinite;}
.ani-breathe{animation: ani-breathe 3s infinite;}

//音乐播放转动
@keyframes ani-music {
    100% {
        transform: rotate(360deg);
    }
}

//提示下滑
@keyframes ani-down {
    50%{
        transform : translateY(15px);
    }
}

//指纹动画
@keyframes ani-print {
    100% {
        transform: translateY(280/@rem);
    }
}

//入口处动画
@keyframes ani-into {
    50%{
        transform : translateY(20/@rem) scale(.9,.9);
        opacity: .6;
    }
}

//大小css动画
@keyframes ani-pulse {
    50% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
}

//呼吸效果
@keyframes ani-breathe {
    50% {
        opacity: .3;
    }
}